<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Untitled Document</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
		 <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
		 <script type="text/javascript" src="../../js/jquery/jquery.autocomplete.js">
        </script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
        <script type="text/javascript" src="../../js/jquery/jquery.autocomplete.js">
        </script>  
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js">
        </script>
        <link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/textfield.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
        <script>
            $(document).ready(function(){
                var textfield1 = new ctp.ui.textfield({
                    id: 'textfield1',
                    width: '200px',
					onlyAllowKeyCodes:["number","letter"],
					//type:'button',
					//buttonSet:{text:'',background:'triangle',width:'17px',onClick:function(caller){alert('你点我了'+caller.getId());}}				
					autoComplete: {source: 'textfield.json',options:{minChars: 0}}
                });
                var textfield2 = new ctp.ui.textfield({
                    id: 'textfield2',
                    width: '200px',
                    type:'adjustment',
                    adjustValue:'1.5',
                    
					onlyAllowKeyCodes:["number","letter"]
					//type:'button',
					//buttonSet:{text:'',background:'triangle',width:'17px',onClick:function(caller){alert('你点我了'+caller.getId());}}				
					//autoComplete: {source: 'textfield.json',options:{minChars: 0}}
                });
                var button1 = new ctp.ui.button({
                    id: 'button1',
                    text: '禁用',
                    width: '100%',
                    onClick: function(){
                        textfield1.setDisable(true);
                    }
                });
                var button2 = new ctp.ui.button({
                    id: 'button2',
                    width: '100%',
                    text: '启用',
                    onClick: function(){
                        textfield1.setDisable(false);
                    }
                });
                
                var button3 = new ctp.ui.button({
                    id: 'button3',
                    text: '是否禁用',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: textfield1.isDisable()
                        });
                    }
                });
                var button4 = new ctp.ui.button({
                    id: 'button4',
                    text: '设置为只读',
                    width: '100%',
                    onClick: function(){
                        textfield1.setReadOnly(true);
                    }
                });
                var button5 = new ctp.ui.button({
                    id: 'button5',
                    text: '设置为非只读',
                    width: '100%',
                    onClick: function(){
                        textfield1.setReadOnly(false);
                    }
                });
                var button6 = new ctp.ui.button({
                    id: 'button6',
                    text: '是否只读',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: textfield1.isReadOnly()
                        });
                    }
                });
                var button7 = new ctp.ui.button({
                    id: 'button7',
                    text: '设置值为<你好>',
                    width: '100%',
                    onClick: function(){
                        textfield1.setValue('你好');
                    }
                });
                var button8 = new ctp.ui.button({
                    id: 'button8',
                    text: '查看当前值',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: textfield1.getValue()
                        });
                    }
                });
                var button9 = new ctp.ui.button({
                    id: 'button9',
                    text: '隐藏组件',
                    width: '100%',
                    onClick: function(){
                        textfield1.hide();
                    }
                });
                var button10 = new ctp.ui.button({
                    id: 'button10',
                    text: '显示组件',
                    width: '100%',
                    onClick: function(){
                        textfield1.show();
                    }
                });
                var button11 = new ctp.ui.button({
                    id: 'button11',
                    text: '设置组件宽度为100px',
                    width: '100%',
                    onClick: function(){
                        textfield1.setWidth('100px');
                    }
                });
                var button12 = new ctp.ui.button({
                    id: 'button12',
                    text: '绑定change事件',
                    width: '100%',
                    onClick: function(){
                        textfield1.onChange(function(){
                            ctpMSB.alert({
                                title: '信息提示',
                                message: '你改变了值'
                            });
                        });
                    }
                });
                var button13 = new ctp.ui.button({
                    id: 'button13',
                    text: '绑定按键松开事件',
                    width: '100%',
                    onClick: function(){
                        textfield1.onKeyUp(function(){
                            ctpMSB.alert({
                                title: '信息提示',
                                message: '你松开了键盘'
                            });
                        });
                    }
                });
                var button14 = new ctp.ui.button({
                    id: 'button14',
                    text: '设置聚焦时提示信息',
                    width: '100%',
                    onClick: function(){
                        textfield1.onFocus(function(){
                            ctpMSB.alert({
                                title: '信息提示',
                                message: '获得焦点'
                            });
                        });
                    }
                });
				var button15 = new ctp.ui.button({
                    id: 'button15',
                    text: '获得焦点',
                    width: '100%',
                    onClick: function(){
                        textfield1.focus();
                    }
                });
                var button16 = new ctp.ui.button({
                    id: 'button16',
                    text: '失去焦点',
                    width: '100%',
                    onClick: function(){
                        textfield1.blur();
                    }
                });
                var button17 = new ctp.ui.button({
                    id: 'button17',
                    text: '模拟resize',
                    width: '100%',
                    onClick: function(){
                        //textfield1.remove();
						textfield1.settings.pW=120;
						textfield1.settings.rawWidth='100%';
						textfield1.resize();
                    }
                });
				var button18 = new ctp.ui.button({
                    id: 'button18',
                    text: '重设自动参数(不填充)',
                    width: '100%',
                    onClick: function(){
						textfield1.getSettings().autoComplete.options.autoFill=false;
                        textfield1.refreshAutoComplete();
                    }
                });	
				var button19 = new ctp.ui.button({
                    id: 'button19',
                    text: '手工设置onFocus函数',
                    width: '100%',
                    onClick: function(){
                        textfield1.onFocus(function(){
							ctpMSB.alert({
                                title: '信息提示',
                                message: '你已获得焦点'
                            });
						});
                    }
                });
				var button20 = new ctp.ui.button({
                    id: 'button20',
                    text: '手工设置onBlur函数',
                    width: '100%',
                    onClick: function(){
                        textfield1.onBlur(function(){
							ctpMSB.alert({
                                title: '信息提示',
                                message: '你已失去焦点'
                            });
						});
                    }
                });			
				var button21 = new ctp.ui.button({
                    id: 'button21',
                    text: '删除组件',
                    width: '100%',
                    onClick: function(){
                        textfield1.remove();
                    }
                });
                var showLayout = new ctp.ui.gridlayout({
                    id: 'showLayout',
                    width: '100%',
                    cols: 2,
                    align: 'center',
                    colSpace: 30,
                    items: [[{
                        element: textfield1
                    },{
                        element:textfield2
                        }]]
                
                });
                var showGroupbox = new ctp.ui.groupbox({
                    id: 'showGroupbox',
                    items: [showLayout],
                    title: '效果展示区',
					width: '500px',
					height: '100px',
					align:'center'
                });
                var buttonsLayout = new ctp.ui.gridlayout({
                    id: 'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [[{
                        element: button1
                    }, {
                        element: button2
                    }, {
                        element: button3
                    }], [{
                        element: button4
                    }, {
                        element: button5
                    }, {
                        element: button6
                    }], [{
                        element: button7
                    }, {
                        element: button8
                    }, {
                        element: button9
                    }], [{
                        element: button10
                    }, {
                        element: button11
                    }, {
                        element: button12
                    }], [{
                        element: button13
                    }, {
                        element: button14
                    }, {
                        element: button15
                    }], [{
                        element: button16
                    },{
                        element: button17
                    },{
                        element: button18
                    }], [{
                        element: button19
                    },
					{
                        element: button20
                    },
					{
                        element: button21
                    }					
					]]
                
                });
                var buttonsGroupbox = new ctp.ui.groupbox({
                    id: 'buttonsGroupbox',
                    items: [buttonsLayout],
                    width: '500px',
					height: 'auto',
					align:'center',
                    title: '功能测试区'
                });				
                new ctp.ui.panel({
                    title: 'textfield实例',
                    collapsible: true,
                    width: '550px',
                    height: 'auto',
                    align: 'center',
                    items: [showGroupbox, buttonsGroupbox],
                    renderTo: 'body'
                });               
            });
        </script>
    </head>
    <BODY>
        <b>ctp.ui.textfield 实例</b>
        <hr/>
        <br/>	
    </BODY>
</html>
